<template>
  <MyDataGroupWrapper 
    v-bind="groupWrapperProps" ref="groupWrapperRef" 
    @reload="handleSuccess" @change="handleChangeGroup"
  >
    <MyAlert 
      type="success"
      message="目前该功能目前没有使用"
    />
    <BasicTable @register="registerTable" >
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleAddGroup">
          新增数据组
        </a-button>
        <a-button type="primary" preIcon="ant-design:edit-outlined" @click="handleOpenImportDbTable">
          导入
        </a-button>
        <a-button type="primary" @click="handleForm(false, {})" >
          <Icon icon="ant-design:plus-outlined" /> {{ t('新增') }}
        </a-button>
      </template>

      <!-- <template #firstColumn="{ record }">
        <span class="cursor-pointer" @click="expandCollapse(record)">
          {{ record.areaName }}
        </span>
      </template> -->
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="handleSuccess" />
    <FormDetail @register="registerFormDetail"/>
    <ImportDbTable @register="importDbTableDrawer" @select="handleImportTable"/>
  </MyDataGroupWrapper>
</template>
<script lang="ts" name="dataset" setup>
import { ref, nextTick, onMounted, unref } from 'vue';
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import MyAlert from '/@/components/My/MyAlert.vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGlobSetting } from '/@/hooks/setting';
import { columns, searchFormSchema } from './data';
import { 
  pageDataset, deleteDataset, deleteGroup, 
  saveOrUpdateGroup, batchDeleteGroup, importTable as importTableApi
} from '/@/api/infra/dataset';
import { useMessage } from '/@/hooks/web/useMessage';
import { MyDataGroupWrapper } from '/@/components/BizDataGroup'
import InputForm from './Form.vue';
import FormDetail from './Detail.vue';
import { Icon } from '/@/components/Icon';
import { DataGroupBizType } from '/@/components/BizDataGroup/index';
import ImportDbTable from '/@/views/onlineDev/datasource/ImportDbTable.vue';

const { t } = useI18n('');
const { createMessage } = useMessage();
const groupId = ref()
const glob = useGlobSetting();
const [importDbTableDrawer, {openDrawer: openImportDbTableDrawer}] = useDrawer();
const [registerInputFormDrawer, { openDrawer: openInputFromDrawer }] = useDrawer();
const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()
const groupWrapperRef = ref<any>()
const groupWrapperProps = ref<any>({
  bizType: DataGroupBizType.DATASET,
  title: '数据集组',
  deleteApi: deleteGroup,
  batchDeleteApi: batchDeleteGroup,
  saveOrUpdateApi: saveOrUpdateGroup,
})

const actionColumn: BasicColumn = {
  width: 160,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      ifShow: record.sendStatus != 1,
      // auth: 'sys:area:delete',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      // auth: 'sys:area:update',
      onClick: handleForm.bind(null, true, record),
    },
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '数据集',
  api: pageDataset,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    params.groupId = groupId.value
    return params;
  },
  formConfig: {
    baseColProps: { lg: 12, md: 12 },
    labelWidth: 60,
    schemas: searchFormSchema,
    showResetButton: false,
  },
  showTableSetting: true,
  showIndexColumn: false,
  useSearchForm: true,
  isTreeTable: false,
  pagination: true,
  immediate: false,
  canResize: true,
  rowKey: 'id',
  actionColumn,
})


const handleDelete = async (record) => await deleteDataset({ id: record.id }, reload);
const handleForm = (isUpdate, record) => openInputFromDrawer(true, { record, isUpdate });
const handleDetail = (record) => openFormDetail(true, { record })
const handleSuccess = () => reload()
const handleAddGroup = () => groupWrapperRef.value.handleAddGroup({})
const handleOpenImportDbTable = () => openImportDbTableDrawer(true, {})
const handleImportTable = async (data) => {
  console.log('data', data)
  await importTableApi({ ...data, groupId: groupId.value })
  createMessage.success('导入成功')
  reload()
}
const handleChangeGroup = (id) => {
  groupId.value = id
  reload()
}

</script>
